<template>
	<view>
		<view class="info-box">
			<cos-image :src="detail.cover.path" height="450rpx"></cos-image>
			<view class="add-section mb-30">
				<view class="content">
					<view class="name">
						<view class="d-flex justify-content-between align-items-center mb-20">
							<view class="title font-size-extra-lg font-weight-bold">{{detail.name}}</view>
							<view @tap="showShare=true"><u-icon name="zhuanfa" size="50"></u-icon></view>
						</view>
						<view class="d-flex justify-content-between align-items-center">
							<text class="tag">{{detail.type_label}}</text>
							<view v-if="detail.claim_id" @tap="claimSpace"><u-icon class="mr-10" name="checkbox-mark" color="#4cd964" size="35"></u-icon><text class="text-color-green font-weight-bold font-size-lg">已认领</text></view>
							<view v-else class="text-color-assist" @tap="claimSpace">场地认领 <u-icon name="arrow-right"></u-icon> </view>
						</view>
					</view>
					<view class="d-flex justify-content-between align-items-center font-size-lg pt-20 pb-20">
						<view><u-icon class="mr-10" name="map" size="35"></u-icon><text class="mr-10">{{detail.city_label}}</text><text class="mr-10">{{detail.area_label}}</text></view>
						<view @tap="toMap" class="d-flex align-items-center"><image class="navigation-image mr-10" mode="widthFix" src="../../static/navigation.png"></image><text class="text-color-assist">导航</text></view>
					</view>
					<view class="address text-color-assist">{{detail.address}}</view>
				</view>
				<view class="d-flex text-color-assist justify-content-between align-items-center" style="padding-top: 20rpx;">
					<view>更新于{{$f.timeAgo(detail.time_diff)}}</view>
					<view class="d-flex"><view>浏览 {{detail.reads}}</view></view>
				</view>
			</view>
			<view class="section" v-if="detail.claim">
				<view class="font-weight-bold font-size-lg mb-20">场地负责人</view>
				<view class="member-item">
					<view class="d-flex align-items-center">
						<cos-avatar :src="detail.claim.avatar" :showSex="detail.claim.gender?true:false" :sexIcon="detail.claim.gender_label"></cos-avatar>
						<view class="user">
							<view class="name font-size-lg">{{detail.claim.nickname}}</view>
							<view class="text-color-assist">
								<text class="mr-10" v-if="detail.claim.city||detail.claim.province">{{detail.claim.city||detail.claim.province}} |</text>
								<text class="mr-10">{{detail.claim.identity_label}}</text>
							</view>
						</view>
					</view>
					<view class="d-flex">
						<view class="d-flex flex-column align-items-center mr-50" @tap="tel(detail.tel)">
							<u-icon name='phone-fill' size="40"></u-icon>
							<text class="text-color-assist">电话</text>
						</view>
						<view class="d-flex flex-column align-items-center" @tap="copy(detail.wechat_no)">
							<u-icon name="weixin-fill" size="40"></u-icon>
							<text class="text-color-assist">微信</text>
						</view>
					</view>
				</view>
			</view>
			<view class="section">
				<view class="mb-40">
					<view class="font-weight-bold font-size-lg mb-20">场地介绍</view>
					<view class="font-size-lg">{{detail.introduce}}</view>
				</view>
				<view class="mb-40">
					<view class="font-weight-bold font-size-lg mb-20">收费情况</view>
					<view class="font-size-lg">{{detail.is_fee?detail.fee:'不收费'}}</view>
				</view>
				<view>
					<view class="font-weight-bold font-size-lg mb-20">是否预约</view>
					<view class="font-size-lg">{{detail.is_appointment?'需要预约':'不需要预约'}}</view>
				</view>
			</view>
			<view class="section">
				<view class="font-weight-bold font-size-lg mb-20">场地相册</view>
				<view class="w-100" style="position: relative;">
					<cos-image :src="detail.cover.path" height="400rpx" :images="detail.images" :imagesCount="detail.images_count"></cos-image>
				</view>
			</view>
			<view class="section">
				<view class="font-weight-bold font-size-lg mb-20">场地上传人</view>
				<view class="member-item">
					<cos-avatar :src="detail.user.avatar" :showSex="detail.user.gender?true:false" :sexIcon="detail.user.gender_label"></cos-avatar>
				</view>
			</view>
		</view>
		
		<!-- 底部按钮操作 -->
		<view class="foot-tool">
			<view class="tool-item" @tap="launchShoot">
				<image class="icon" src="../../static/launch_shoot.png"></image>
				<text class="txt">发起约拍</text>
			</view>
			<view class="tool-item" @tap="uploadAlbum">
				<image class="icon" src="../../static/upload-album.png"></image>
				<text class="txt">上传作品</text>
			</view>
			<view class="tool-item" @tap="thumb">
				<image class="icon" src="../../static/space-thumb.png"></image>
				<text class="txt">{{detail.is_thumb_count?'已点赞':'点赞'}}</text>
			</view>
			<view class="tool-item" @tap="collect">
				<image class="icon" src="../../static/space-collection.png"></image>
				<text class="txt">{{detail.is_collect_count?'已收藏':'收藏'}}</text>
			</view>
		</view>		
		<!-- 分享选择弹窗 -->
		<q-popup v-model="showShare">
			<view class="share-wrap" @click="showShare = false">
				<button open-type="share" class="share-item u-reset-button">
					<u-icon name="weixin-fill" size="50"></u-icon>
					<text>微信好友</text>
				</button>
				<view class="share-item" @click="showShareGuide=true">
					<u-icon name="moments" size="50"></u-icon>
					<text>分享朋友圈</text>
				</view>
				<view class="share-item" @tap="generateShareText">
					<u-icon name="file-text-fill" size="50"></u-icon>
					<text>生成文案</text>
				</view>
			</view>
		</q-popup>
		
		<!-- 分享组件 -->
		<shareGuide v-model="showShareGuide"></shareGuide>
		
		<!-- 登录popup -->
		<login-popup ref="loginPopup" @yes="loginYes"></login-popup>
	</view>
</template>

<script>
	import {mapState, mapMutations } from 'vuex'
	import cosImage from '../../components/cos-media/cos-image.vue'
	import shareGuide from "../../components/shopro-share-guide/shopro-share-guide.vue";
	import loginPopup from "@/components/login-popup/login-popup.vue"
	export default {
		components: {
			cosImage,
			shareGuide,
			loginPopup
		},
		computed:{
			...mapState(['hasLogin', 'userInfo', 'customer']),
		},
		data() {
			return {
				spaceId:'',
				detail:'',
				shootLists:[],
				showShare:false,
				showShareGuide:false
			}
		},
		onLoad(options) {
			this.spaceId = options.id;
			this.getDetail();
		},
		onShareAppMessage(res) {
			return {
				title: "人人约拍推荐摄影场地-" + this.detail.name,
				path: '/pages/space/details?id=' + this.detail.id,
			};
		},
		onShareTimeline(res) {
			return {
				title: "人人约拍推荐摄影场地-" + this.detail.name,
				path: '/pages/space/details',
				query: 'id=' + this.detail.id
			}
		},
		methods: {
			async getDetail() {
				uni.showLoading({
					mask: true,
					title: '加载中'
				});
				let res = await this.$api('spaceDetail')
				this.detail = res.data.detail;
				uni.hideLoading();
			},
			thumb() {
				if(!this.hasLogin) {
					this.$refs['loginPopup'].open();return;
				}
				
				let title = this.detail.is_thumb_count?'取消点赞中...':'点赞中...';
				uni.showLoading({mask: true,title: title});
				uni.hideLoading()
			},
			collect() {
				if(!this.hasLogin) {
					this.$refs['loginPopup'].open();return;
				}
				let title = this.detail.is_collect?'取消收藏中...':'收藏中...';
				uni.showLoading({mask: true,title: title});
				uni.hideLoading();
			},
			claimSpace() {
				let that = this;
				uni.showModal({
					title: '提示',
					content: '在线联系客服，认领场地',
					confirmText:'去认领',
					success (res) {
						that.$f.customer(that.customer)
					}
				})
			},
			tel(tel) {
				this.$f.tel(tel)
			},
			copy(no) {
				this.$f.copy(no)
			},
			launchShoot() {
				if(!this.hasLogin) {
					this.$refs['loginPopup'].open();return;
				}
				
				uni.navigateTo({
					url:"/pages/post/shoot?spaceId="+this.detail.id+"&spaceName="+this.detail.name+"&spaceAddress="+this.detail.address+"&spaceLongitude="+this.detail.longitude+"&spaceLatitude="+this.detail.latitude
				})
			},
			uploadAlbum() {
				if(!this.hasLogin) {
					this.$refs['loginPopup'].open();return;
				}
				
				uni.navigateTo({
					url:"/pages/post/album?spaceId="+this.detail.id+"&spaceName="+this.detail.name+"&spaceAddress="+this.detail.address+"&spaceLongitude="+this.detail.longitude+"&spaceLatitude="+this.detail.latitude
				})
			},
			toMap() {
				uni.openLocation({
					latitude: Number(this.detail.latitude), //要去的纬度-地址
					longitude: Number(this.detail.longitude), //要去的经度-地址
					name: this.detail.name,
					address: this.detail.address
				})
			},
			loginYes() {
				this.getDetail();
			},
			generateShareText() {
				if(!this.hasLogin) {
					this.$refs['loginPopup'].open();return;
				}
				uni.showLoading({mask: true,title: "生成中..."});
				uni.hideLoading();
			},
		}
	}
</script>

<style lang="scss">
	
.info-box {
	padding-bottom: 200rpx;
}
.add-section {
	background-color: #ffffff;
	position: relative;
	padding: 30rpx;
	margin-top: -50rpx;
	border-top-left-radius:50rpx;
	border-top-right-radius:50rpx
}
.add-section .content {
	border-bottom: 2rpx solid #F5F5F5;
	padding: 20rpx 0;
}
.add-section .content .name{
	border-bottom: 2rpx solid #f5f5f5;
	padding-bottom: 20rpx;
}
.add-section .content .tag {
	background-color: rgb(239, 210, 52);
	color: #666;
	border-radius: 20rpx;
	padding: 10rpx 26rpx;
	font-size: 28rpx;
	font-weight: normal;
	border-radius: 60rpx;
}
.add-section .content .navigation-image {
	width: 50rpx;
	height: 50rpx;
}
.add-section .content .address {
	font-size: 30rpx;
}
.section {
	background-color: #ffffff;
	padding: 30rpx;
	margin-bottom: 30rpx;
}
.member-item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	background-color: #ffffff;
}
.shoot-item {
	padding: 20rpx 0;
	border-bottom: 2rpx solid #f5f5f5;
	&:last-child{
		border-bottom: 0;
		padding: 20rpx 0 0 0;
	}
}
.member-item .avatar {
	margin-right: 20rpx;
}

.member-item .user .name {
	margin-right: 20rpx;
}

.member-item .user .iconfont {
	font-size: 24rpx;
}

.member-item .btn-gz {
	margin-left: auto;
}

.foot-tool {
	position: fixed;
	bottom: 0;
	width: 100%;
	z-index: 99999;
	background-color: #fff;
	height: 104rpx;
	display: flex;
	align-items: center;
	border-top: 2rpx solid #F5F5F5;
	.tool-item {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		flex: 1;
		height: 100%;
		border-radius: 16rpx;
		position: relative;
		.icon {
			width: 60rpx;
			height: 60rpx;
		}
		.txt {
			font-size: 22rpx;
		}
	}
}

// 分享弹窗
.share-wrap{
	display: flex;
	padding: 30rpx;
	width: 80%;
	margin: 0 auto;
	justify-content: space-between;
	.share-item{
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		// &:nth-child(1){
		// 	margin-right: auto;
		// }
		image{
			width: 100rpx;
			height: 100rpx;
		}
		text{
			font-size: 24rpx;
			margin-top: 20rpx;
		}
	}
}

</style>
